<template>
<div>
 <el-row >
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="会员名" size="small" class="form-control" v-model="like">
            <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small"
             @click="handleCreateUser()">预约</el-button>
        </el-col>
      </el-row>
 </el-row>


  <el-table
    :data="searchUser(like).slice((search.currentPage - 1) * pagesize, search.currentPage * pagesize)"
    border
    style="width: 100%">

 <el-table-column
      prop=""
      label="预约日期"
      width="120">
      <template slot-scope="scope">
         {{scope.row.createtime | dateFormat}}
      </template>
    </el-table-column>

<!-- <el-table-column prop="" label="评估日期" header-align="center" width="150">
              <template slot-scope="scope">
                  {{scope.row.createtime | dateFormat}}
              </template>
            </el-table-column>
orderDate
 -->


    <el-table-column
      prop="member.fileNumber"
      label="档案编号"
      width="150">
    </el-table-column>

    <el-table-column
      prop="member.name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="member.phoneNumber"
      label="手机号码"
      width="150">
    </el-table-column>
    <el-table-column
      prop="orderType"
      label="预约类型"
      width="300">
    </el-table-column>
    <el-table-column
      prop="orderStatus"
      label="预约状态"
      width="120">
    </el-table-column>


    <el-table-column
      label="操作"
      width="120">
      <template slot-scope="scope">
        <!-- <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">确认预约</el-button> -->
        <el-button type="" size="small" @click="updateOrderStatus(scope.$index, scope.row)">取消预约</el-button>
      </template>
    </el-table-column>
  </el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="search.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>


 <!-- 修改弹框 -->
         <el-dialog title="用户信息" :visible.sync="dialogFormVisible">

           <el-header>添加预约信息</el-header>

  <el-tabs :tab-position="tabPosition" style="height: 550px;margin-top: 50px;">
    <el-tab-pane label="个人信息">

<el-row :gutter="20">
  <el-col :span="3"><div>身份证:</div></el-col>
  <el-col :span="6"><el-input placeholder="身份证号码" v-model="sfz" @blur="serachMemberByIdCard"/></el-col>
  <el-col :span="15"></el-col>
</el-row>

<el-row :gutter="20">
  <el-col :span="4"><div class="block">
     <el-date-picker v-model="order.orderDate" type="date" placeholder="选择日期"> </el-date-picker>
  </div> </el-col>
  <el-col :span="8"><div class="grid-content "></div></el-col>
  <el-col :span="12">姓名：<el-input disabled v-model="Member.name" /></el-col>

</el-row>

<el-row :gutter="20">
  <el-col :span="12">性别:<el-input disabled v-model="Member.sex" /></el-col>
  <el-col :span="12">年龄:<el-input disabled v-model="Member.age" /></el-col>
</el-row>

<el-row :gutter="20">
  <el-col >身份证:<el-input disabled v-model="Member.idCard"/></el-col>
</el-row>

<el-row :gutter="20">
  <el-col >手机:<el-input disabled v-model="Member.phoneNumber" /></el-col>
</el-row>

<el-row :gutter="20">
     <el-col >出生日期:<el-input  disabled v-model="Member.phoneNumber" /></el-col>


</el-row>
    </el-tab-pane>
    <el-tab-pane label="套餐信息">

       <el-transfer
    filterable
    filter-placeholder="请输入套餐名称"
    v-model="value2"
    :titles="['全部套餐','已选择套餐']"
    @change="handleChange"
    :data="transferData">
  </el-transfer>
    </el-tab-pane>
  </el-tabs>

          <div slot="footer"  class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <!-- 设置触发更新的方法 -->
            <el-button type="submit" @click="tjiao">确定</el-button>
          </div>
        </el-dialog>
</div>
</template>

<script>
import {orders,addorder,updorderstauts} from '@/api/order.js'
import {setmeal} from '@/api/setmeal.js'
import {oneMember} from  '@/api/member.js'

export default {
  data(){

    return{
       pagesize:5,
      like:'',
        activeName2: 'first',
        transferData:[],
        value2: [],
        sfz:'',

        tabPosition: 'left',

      tableData:[],

      // userTotal: 0,
      search: {
        sort: "",
        offset: 0,
        limit: 10,
        currentPage: 1
      },
       dialogFormVisible: false,
                formLabelWidth: "80px",
              /* // 设置form用于进行添加的时候绑定值
               form: {
               orderDate:'',
               fileNumber:'',
               name:'',
               phoneNumber:'',
               orderType:'',
               orderStatus:'',
               currentIndex: '',
               }, */
          Member:{
            name:'',
            sex:'',
            age:'',
            idCard:'',
            phoneNumber:'',
            regTime:'',
            birthday:'',

          },
          order:{

             member_id:'',
             setmeal_id:'',
               orderDate:''
          }

    }
  },
  methods:{

    searchUser(like){
      console.log(like)
      return this.tableData.filter((item,i)=>{
            if(item.member.name.includes(like)){
              return item;
            }

          })
    },

    async updateOrderStatus(index,row){
      var tk=confirm("确认要取消预约吗？")
      if(tk){
        let [res] =await Promise.all([
                    updorderstauts(row.id)
                  ])

              this.pageInit();
      }
      // console.log(row)
      // console.log("*****"+row.id)

    },

   async serachMemberByIdCard(){
        console.log(this.sfz)
         try{

          let [res] =await Promise.all([
            oneMember(this.sfz)
          ])

          // console.log(res.data)
          this.Member=res.data

          this.order.member_id=res.data.id

        }catch(error){
            console.log(error);
        }
    },

    async pageInit2(){
        try{
          let [res] =await Promise.all([
            setmeal()
          ])

				const allData = res.data
				const data = [];
				for(let i = 0; i < allData.length; i++) {
					data.push({
            	key: allData[i].id,
            label: allData[i].name,
          	});
				}
				this.transferData = data;
        }catch(error){
            console.log(error);
        }

     },

     handleChange(value, direction){
          //  console.log(value, direction);

           console.log(value[0])

           this.order.setmeal_id=value[0]
      },

     async pageInit(){
        try{
          let [res] =await Promise.all([
            orders()
          ])

          this.tableData=res.data
        }catch(error){
            console.log(error);
        }
     },


    async tjiao() {
            // console.log(this.Member.id)
            // console.log(this.value2)
         try{

          let [res] =await Promise.all([

            addorder(this.order)
          ])

        this.pageInit();

        }catch(error){
            console.log(error);
        }


            this.dialogFormVisible = false;
     },
     cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    }
    ,
    /* handleEdit(index, row) {
        // console.log(index)
               // 将数据的index传递过来用于实现数据的回显
               this.form = this.tableData[index];
                this.currentIndex = index;

                this.row=row
                // 设置对话框的可见
                this.dialogFormVisible = true;
          }, */



handleSizeChange(val) {
            this.search.limit = val;
             this.search.offset = (this.search.currentPage - 1) * val
              //  this.searchUser()
    },
    handleCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit
      this.search.currentPage = val
      // this.searchUser()
    },
    async handleCreateUser() {  //添加
      this.dialogFormVisible = true
    },

   /*  handleClick(row) {

        this.dialogFormVisible=true
      } */
  },

  filters:{
    dateFormat:function(data){
        var dt=new Date(data)
        var n=dt.getFullYear();
        var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
        var r=(dt.getDate()).toString().padStart(2,"0");
        dt.getHours();
        dt.getMinutes();
        dt.getSeconds();
        return n+"年"+y+"月"+r+"日";
      },
  },

  created() {
            this.pageInit();
            this.pageInit2();
          },
}
</script>

<style>
.el-row {
    margin-bottom: 20px;

  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-header{

    text-align: center;
    line-height: 60px;
  }

  .el-aside {

    text-align: center;
    line-height: 300px;
  }

  .el-main {

    text-align: center;
    line-height: 30px;
  }

  body > .el-container {
    margin-bottom: 20px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
